{% extends 'base.html' %}
{% load static %}

{% block title %}我的工作任务{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <h2 class="mb-4"><i class="fas fa-tasks me-2"></i>我的工作任务</h2>

            <!-- 待处理任务 -->
            <div class="card mb-4">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0">待处理任务 ({{ pending_tasks.count }})</h5>
                </div>
                <div class="card-body">
                    {% if pending_tasks %}
                        <div class="list-group">
                            {% for task in pending_tasks %}
                                <div class="list-group-item list-group-item-action flex-column align-items-start">
                                    <div class="d-flex w-100 justify-content-between">
                                        <h5 class="mb-1">{{ task.workflow_instance.instance_name }}</h5>
                                        <small class="text-muted">{{ task.created_at|timesince }}前</small>
                                    </div>
                                    <p class="mb-1"><strong>步骤:</strong> {{ task.step_name }}</p>
                                    <p class="mb-1"><strong>发起人:</strong> {{ task.workflow_instance.created_by.username }}</p>
                                    {% if task.workflow_instance.workflow_data.reason %}
                                        <p class="mb-1"><strong>事由:</strong> {{ task.workflow_instance.workflow_data.reason }}</p>
                                    {% endif %}
                                    
                                    <hr>
                                    
                                    <form method="post" action="{% url 'assets:process_task' task.id %}" class="mt-2">
                                        {% csrf_token %}
                                        <div class="mb-2">
                                            <textarea name="comments" class="form-control form-control-sm" rows="2" placeholder="处理意见（可选）"></textarea>
                                        </div>
                                        <button type="submit" name="action" value="approve" class="btn btn-sm btn-success">
                                            <i class="fas fa-check me-1"></i>批准
                                        </button>
                                        <button type="submit" name="action" value="reject" class="btn btn-sm btn-danger">
                                            <i class="fas fa-times me-1"></i>拒绝
                                        </button>
                                    </form>
                                </div>
                            {% endfor %}
                        </div>
                    {% else %}
                        <div class="text-center py-5">
                            <i class="fas fa-check-circle fa-3x text-success mb-3"></i>
                            <p class="text-muted">太棒了！没有待处理的任务。</p>
                        </div>
                    {% endif %}
                </div>
            </div>

            <!-- 已处理任务 -->
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">已处理任务</h5>
                </div>
                <div class="card-body">
                    <!-- Filter Form -->
                    <form method="get" class="row g-3 mb-4">
                        <div class="col-md-4">
                            <select name="status" class="form-select">
                                <option value="">所有状态</option>
                                {% for code, name in status_choices %}
                                    {% if code != 'pending' %}
                                    <option value="{{ code }}" {% if code == selected_status %}selected{% endif %}>{{ name }}</option>
                                    {% endif %}
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-md-4">
                            <select name="type" class="form-select">
                                <option value="">所有类型</option>
                                {% for code, name in type_choices %}
                                <option value="{{ code }}" {% if code == selected_type %}selected{% endif %}>{{ name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-md-4">
                            <button type="submit" class="btn btn-primary w-100">筛选</button>
                        </div>
                    </form>

                    {% if processed_tasks %}
                        <ul class="list-group list-group-flush">
                            {% for task in processed_tasks %}
                                <li class="list-group-item d-flex justify-content-between align-items-center">
                                    <div>
                                        <span class="fw-bold">{{ task.workflow_instance.instance_name }}</span>
                                        <small class="text-muted ms-2">({{ task.step_name }})</small>
                                    </div>
                                    <div>
                                        {% if task.status == 'completed' %}
                                            <span class="badge bg-success">已批准</span>
                                        {% elif task.status == 'rejected' %}
                                            <span class="badge bg-danger">已拒绝</span>
                                        {% else %}
                                            <span class="badge bg-secondary">{{ task.get_status_display }}</span>
                                        {% endif %}
                                        <small class="text-muted ms-2">{{ task.completed_at|date:"Y-m-d H:i" }}</small>
                                    </div>
                                </li>
                            {% endfor %}
                        </ul>

                        <!-- Pagination -->
                        <nav aria-label="Page navigation" class="mt-4">
                            <ul class="pagination justify-content-center">
                                {% if processed_tasks.has_previous %}
                                    <li class="page-item">
                                        <a class="page-link" href="?page=1&status={{ selected_status|default:'' }}&type={{ selected_type|default:'' }}">&laquo; 首页</a>
                                    </li>
                                    <li class="page-item">
                                        <a class="page-link" href="?page={{ processed_tasks.previous_page_number }}&status={{ selected_status|default:'' }}&type={{ selected_type|default:'' }}">上一页</a>
                                    </li>
                                {% endif %}

                                <li class="page-item disabled">
                                    <a class="page-link" href="#">第 {{ processed_tasks.number }} 页，共 {{ processed_tasks.paginator.num_pages }} 页</a>
                                </li>

                                {% if processed_tasks.has_next %}
                                    <li class="page-item">
                                        <a class="page-link" href="?page={{ processed_tasks.next_page_number }}&status={{ selected_status|default:'' }}&type={{ selected_type|default:'' }}">下一页</a>
                                    </li>
                                    <li class="page-item">
                                        <a class="page-link" href="?page={{ processed_tasks.paginator.num_pages }}&status={{ selected_status|default:'' }}&type={{ selected_type|default:'' }}">尾页 &raquo;</a>
                                    </li>
                                {% endif %}
                            </ul>
                        </nav>
                    {% else %}
                        <p class="text-muted text-center mb-0">暂无处理记录。</p>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}
